import ContactForm from "../../components/contact/ContactForm";
import Link from "next/link";
import Image from "next/image";

export const metadata = {
  title: "联系我们 - 百善家政",
  description: "联系百善家政，获取专业的家政服务咨询和预约。",
};

export default function ContactPage() {
  return (
    <div className="flex flex-col">
      {/* 页面标题 */}
      <section className="bg-blue-600 text-white py-16 relative">
        <div className="absolute inset-0 overflow-hidden">
          <Image 
            src="/images/hero-bg.jpg" 
            alt="联系我们背景" 
            fill 
            className="object-cover opacity-20"
          />
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
          <h1 className="text-4xl font-bold mb-4">联系我们</h1>
          <p className="text-xl max-w-3xl mx-auto mb-8">
            无论您有任何问题或需求，我们都将竭诚为您服务
          </p>
          <a 
            href="#booking-service" 
            className="inline-block bg-white text-blue-600 font-medium px-6 py-3 rounded-md hover:bg-blue-50 transition-colors"
          >
            立即预约服务
          </a>
        </div>
      </section>

      {/* 预约服务 */}
      <section id="booking-service" className="py-16 bg-gray-50 scroll-mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">预约服务</h2>
          
          <div className="mb-12">
            <p className="text-lg text-gray-600 text-center max-w-3xl mx-auto">
              百善家政提供便捷的服务预约流程，您可以通过以下方式预约我们的服务：
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-center mb-4">电话预约</h3>
              <p className="text-gray-600">
                拨打我们的客服热线 <span className="font-semibold">400-123-4567</span>，我们的客服人员会详细了解您的需求并安排服务。服务时间：周一至周日 8:00-20:00。
              </p>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow-md">
              <div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-center mb-4">在线预约</h3>
              <p className="text-gray-600">
                填写下方的在线咨询表单，选择您需要的服务类型，我们会在收到表单后1个工作日内与您联系，确认服务细节。
              </p>
              <div className="mt-4 text-center">
                <a 
                  href="#contact-form" 
                  className="inline-block bg-blue-600 text-white font-medium px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
                >
                  填写预约表单
                </a>
              </div>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow-md">
              <div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-center mb-4">微信预约</h3>
              <p className="text-gray-600">
                扫描下方二维码关注我们的官方微信公众号，发送"预约服务"即可获取在线预约入口，或直接与客服人员在线沟通。
              </p>
              <div className="mt-4 flex justify-center">
                <div className="h-32 w-32 relative overflow-hidden">
                  <Image 
                    src="/images/qrcode.jpg" 
                    alt="微信二维码" 
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
          
          <div className="mt-12 bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-semibold mb-4">预约流程</h3>
            <div className="flex flex-col md:flex-row">
              <div className="flex-1 flex flex-col items-center p-4">
                <div className="h-12 w-12 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-lg mb-3">1</div>
                <h4 className="font-semibold mb-2">提交需求</h4>
                <p className="text-gray-600 text-center">填写预约表单或电话咨询，提供详细需求</p>
              </div>
              <div className="hidden md:block w-8 self-center">
                <svg className="w-full text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </div>
              <div className="flex-1 flex flex-col items-center p-4">
                <div className="h-12 w-12 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-lg mb-3">2</div>
                <h4 className="font-semibold mb-2">确认服务</h4>
                <p className="text-gray-600 text-center">客服人员与您确认服务内容、时间和价格</p>
              </div>
              <div className="hidden md:block w-8 self-center">
                <svg className="w-full text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </div>
              <div className="flex-1 flex flex-col items-center p-4">
                <div className="h-12 w-12 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-lg mb-3">3</div>
                <h4 className="font-semibold mb-2">安排人员</h4>
                <p className="text-gray-600 text-center">根据您的需求安排专业的服务人员</p>
              </div>
              <div className="hidden md:block w-8 self-center">
                <svg className="w-full text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </div>
              <div className="flex-1 flex flex-col items-center p-4">
                <div className="h-12 w-12 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-lg mb-3">4</div>
                <h4 className="font-semibold mb-2">上门服务</h4>
                <p className="text-gray-600 text-center">服务人员准时上门，提供专业服务</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 联系信息和表单 */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="lg:flex lg:space-x-12">
            {/* 联系信息 */}
            <div className="lg:w-1/3 mb-12 lg:mb-0">
              <h2 className="text-2xl font-bold text-gray-900 mb-6">联系方式</h2>
              
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <svg
                      className="h-5 w-5 text-blue-600"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                      />
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                      />
                    </svg>
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-semibold text-gray-900">地址</h3>
                    <p className="mt-1 text-gray-600">
                      北京市朝阳区建国路88号
                      <br />
                      百善家政大厦 10层
                    </p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <svg
                      className="h-5 w-5 text-blue-600"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                      />
                    </svg>
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-semibold text-gray-900">电话</h3>
                    <p className="mt-1 text-gray-600">400-123-4567</p>
                    <p className="mt-1 text-gray-600">010-8888-7777</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <svg
                      className="h-5 w-5 text-blue-600"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                      />
                    </svg>
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-semibold text-gray-900">邮箱</h3>
                    <p className="mt-1 text-gray-600">contact@baishanjz.com</p>
                    <p className="mt-1 text-gray-600">service@baishanjz.com</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <svg
                      className="h-5 w-5 text-blue-600"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-semibold text-gray-900">营业时间</h3>
                    <p className="mt-1 text-gray-600">周一至周五: 9:00 - 18:00</p>
                    <p className="mt-1 text-gray-600">周六至周日: 10:00 - 16:00</p>
                  </div>
                </div>
              </div>

              <div className="mt-8">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">关注我们</h3>
                <div className="flex space-x-4">
                  <a
                    href="#"
                    className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center hover:bg-blue-200 transition-colors"
                  >
                    <svg
                      className="h-5 w-5 text-blue-600"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
                    </svg>
                  </a>
                  <a
                    href="#"
                    className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center hover:bg-blue-200 transition-colors"
                  >
                    <svg
                      className="h-5 w-5 text-blue-600"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                    </svg>
                  </a>
                  <a
                    href="#"
                    className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center hover:bg-blue-200 transition-colors"
                  >
                    <svg
                      className="h-5 w-5 text-blue-600"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                    </svg>
                  </a>
                </div>
              </div>

              <div className="mt-8">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">公司地址</h3>
                <div className="h-64 rounded-lg overflow-hidden">
                  <Image
                    src="/images/office-map.jpg"
                    alt="公司地址地图"
                    width={400}
                    height={300}
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>

            {/* 联系表单 */}
            <div id="contact-form" className="lg:w-2/3 scroll-mt-16">
              <div className="bg-white rounded-lg shadow-md p-8">
                <h2 className="text-2xl font-bold text-gray-900 mb-6">在线咨询</h2>
                <ContactForm />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 常见问题 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">常见问题</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            <div className="bg-white p-6 rounded-lg shadow">
              <h3 className="text-xl font-semibold text-gray-900 mb-3">如何预约服务？</h3>
              <p className="text-gray-600">
                您可以通过网站在线预约、拨打客服电话400-123-4567或者关注我们的微信公众号进行预约。我们的客服人员会在收到预约后尽快与您联系确认详情。
              </p>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow">
              <h3 className="text-xl font-semibold text-gray-900 mb-3">服务人员是否经过专业培训？</h3>
              <p className="text-gray-600">
                是的，我们所有的服务人员都经过严格筛选和专业培训，持有相关资格证书，并定期接受技能提升培训，确保提供专业、规范的服务。
              </p>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow">
              <h3 className="text-xl font-semibold text-gray-900 mb-3">服务价格如何计算？</h3>
              <p className="text-gray-600">
                服务价格根据服务类型、服务时长、服务难度等因素综合计算。我们会在服务前与您确认具体价格，确保价格透明，无隐形收费。
              </p>
            </div>
            
            <div className="bg-white p-6 rounded-lg shadow">
              <h3 className="text-xl font-semibold text-gray-900 mb-3">如果对服务不满意怎么办？</h3>
              <p className="text-gray-600">
                我们承诺提供满意的服务。如果您对服务有任何不满意，请及时联系我们的客服，我们会第一时间处理并提供解决方案，必要时安排重新服务。
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
} 